<!DOCTYPE html>
<html lang="en">
</html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的订单</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <style>
        #img1 {
            vertical-align: bottom;
        }
    </style>
    <meta http-equiv="refresh" content="10">
</head>
<body>
<div id="showOrder">
    <div v-if="orderVoList==null||orderVoList.length==0">
        <el-empty description="暂无订单"></el-empty>
    </div>
    <div class="infinite-list" v-infinite-scroll="loadMthod" style="margin-bottom: 20px;height:640px;overflow-y:auto"
         align="center">
        <div v-for="orderVo in orderVoList" class="infinite-list-item">
            <el-descriptions :colon="false" :column="2">
                <el-descriptions-item label="">
                    <el-image id="img1" :src="orderVo.productImgSrc" style="width: 40px;height: 40px;"></el-image>
                    <span
                            style="color: darkslateblue;font-size:40px;">{{orderVo.shopName}}</span>
                </el-descriptions-item>
                <el-descriptions-item label="">
                    <el-button
                            @click.native.prevent="alipay(orderVo.id,orderVo.sumPrice,orderVo.shopName,orderVo.receiveName)"
                            type="success"
                            size="small"
                            v-show="orderVo.status==0">
                        去支付
                    </el-button>
                    <el-button
                            @click.native.prevent="javascript:void(0)"
                            type="success"
                            size="small"
                            v-show="orderVo.status==0">
                        取消
                    </el-button>
                    <el-button
                            @click.native.prevent="javascript:void(0)"
                            type="primary"
                            size="small" v-show="orderVo.status==1" disabled>
                        等待接单
                    </el-button>
                    <el-button
                            @click.native.prevent="javascript:void(0)"
                            type="info"
                            size="small" v-show="orderVo.status==2" disabled>
                        已取消
                    </el-button>
                    <el-button
                            @click.native.prevent="javascript:void(0)"
                            type="primary"
                            size="small" v-show="orderVo.status==3" disabled>
                        等待接单
                    </el-button>
                    <el-button
                            @click.native.prevent="acknowledgement(orderVo.id,6)"
                            type="success"
                            size="small" v-show="orderVo.status==4">
                        确认收货
                    </el-button>
                    <el-button
                            @click.native.prevent="javascript:void(0)"
                            type="danger"
                            size="small" v-show="orderVo.status==5" disabled>
                        商家拒单
                    </el-button>
                    <el-button
                            @click.native.prevent="goComment(orderVo.id)"
                            type="warning"
                            size="small" v-show="orderVo.status==6">
                        去评价
                    </el-button>
                    <el-button
                            @click.native.prevent="goComment(orderVo.id)"
                            type="warning"
                            size="small" v-show="orderVo.status==7">
                        追加评价
                    </el-button>
                </el-descriptions-item>
                <el-descriptions-item label="收货地址">:{{orderVo.addressName}} {{orderVo.receiveName}} {{orderVo.tel}}
                </el-descriptions-item>
                <el-descriptions-item label="订单编号">:NO.{{orderVo.id}}</el-descriptions-item>
                <el-descriptions-item label="下单时间">:{{orderVo.createTime}}</el-descriptions-item>
                <el-descriptions-item label="金额￥">:{{orderVo.sumPrice}} (元)</el-descriptions-item>

            </el-descriptions>

        <!--    <span class="demonstration" style="font-size:20px;">订单编号：<b
                    style="color: red;font-size: 25px">NO.{{orderVo.id}}</b>&#45;&#45;&#45;&#45;店铺名：{{orderVo.shopName}}&#45;&#45;&#45;&#45;下单时间：{{orderVo.createTime}}&#45;&#45;&#45;&#45;总价：<b
                    style="color: red;font-size: 25px">{{orderVo.sumPrice}}(元)</b>&#45;&#45;&#45;&#45;收货地址：{{orderVo.addressName}}</span>-->

            <div v-if="orderVo.orderItemVoList.length>0">
                <el-table
                        ref="multipleTable"
                        :data="orderVo.orderItemVoList"
                        tooltip-effect="dark"
                        style="">
                    <el-table-column
                            label="商品编号"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.productId }}</template>
                    </el-table-column>
                    <el-table-column
                            prop="productName"
                            label="商品名称"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            label="商品图片"
                            width="240">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.productImgSrc" style="width: 150px;height: 150px"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="单价"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="数量"
                            width="120">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <template>
            <el-backtop target=".infinite-list"></el-backtop>
        </template>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>

    </div>


</div>
<script>
    var showOrder = new Vue({
        el: "#showOrder",
        data: {
            orderVoList: [],
            state: '',
            pageSize: 10,
            currentPage: 1,
            totalNumber: 0,
            loading: false,
            noMore: false,

        },
        methods: {
            initOrderVoList() {
                $.post("/orderitem/selectOrderVo", function (data) {
                    showOrder.orderVoList = data;
                })
            },
            pageOrderVolist() {
                $.post("/orderitem/pageOrderVolist", {
                    pageSize: this.pageSize,
                    currentPage: this.currentPage
                }, function (data) {
                    showOrder.orderVoList = data.records;
                    showOrder.totalNumber = data.total;
                    showOrder.loading
                })
            },


            updateOrderStatus(orderId, states) {
                alert(orderId)
                alert(states)
                $.post("/order/createOrder", {orderId: orderId, states: states}, function (data) {
                    console.log(data);
                    if (data == "ok") {
                        showOrder.initOrderVoList();
                    } else {
                        alert(data)
                    }
                })

            },
            alipay(orderId,totalPrice,shopName,address){

                window.open("alipay?WIDout_trade_no="+orderId+"&WIDtotal_amount="+totalPrice+"&WIDsubject="+shopName+"&WIDbody="+address)

            },
            // pay(orderId, states) {
            //     alert(orderId)
            //     alert(states)
            //     $.post("/order/pay", {orderId: orderId, states: states}, function (data) {
            //             console.log(data);
            //             if (data == "ok") {
            //                 showOrder.initOrderVoList();
            //             } else {
            //                 alert(data)
            //             }
            //         }
            //     )
            // },
            loadMthod() {
                showOrder.loading = true;
                setTimeout(function () {
                    if (showOrder.pageSize >= showOrder.totalNumber) {
                        showOrder.noMore = true;
                        showOrder.loading = false;
                        return
                    }
                    showOrder.pageSize += 4;
                    showOrder.pageOrderVolist();
                    showOrder.loading = false;
                }, 2000)
            },
            acknowledgement(orderId, states) {
                $.post("/order/acknowledgement", {orderId: orderId, states: states}, function (data) {
                        console.log(data);
                        if (data == "ok") {
                            showOrder.initOrderVoList();
                        } else {
                            alert(data)
                        }
                    }
                )
            }
            ,
            goComment(orderId) {
                location.href="/comment/toComment?orderId="+orderId
            }

        },
        created() {
            //this.initOrderVoList();
            this.pageOrderVolist();
        },
    });
</script>
</body>
</html>